<template>
	<view class="box flex column pr">
		<image src="../../static/ling.png" mode="" class="img300"></image>
		<view class="box-top plr20 ">
			<view class="top br--20 flex j-between">
				<view class="center" @click="goto('/pages/index/index')">
					<image src="../../static/jnts.png" mode="" class="img44"></image>
					<view class="f14 mt10">
						技能提升
					</view>
				</view>
				<view class="center" @click="goto('/pages/index/policy')">
					<image src="../../static/zcjd.png" mode="" class="img44"></image>
					<view class="f14 mt10">
						政策解读
					</view>
				</view>
				<view class="center" @click="goto('/pages/index/maintenance')">
					<image src="../../static/qywh.png" mode="" class="img44"></image>
					<view class="f14 mt10">
						权益维护
					</view>
				</view>
				<view class="center" @click="qzzs">
					<image src="../../static/qzzs.png" mode="" class="img44"></image>
					<view class="f14 mt10">
						求职助手
					</view>
				</view>
			</view>
		</view>
		<view class="mlr20 mt20 br--20 bag--fff ">
			<view class="flex  ju--around ox-auto w-max p20">
				<view @click="orderStateChange(item.status)" :class="orderState == item.status ? 'active' : ''"
					class="pr center   fs32 fw " v-for="(item,index) in tabList" :key="index">
					<view class="">{{item.label}}</view>
					<image v-show="orderState == item.status" src="../../static/tabs-underline.png" mode="widthFix">
					</image>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-view oy-auto  pr h100 plr20" @scrolltolower="getMore">

			<view class="p20 bag--fff mt20 br--20" v-if="orderState==3" v-for="(item,index) in list" :key="index"
				@click="goto(`/pages/index/PublicDetails?id=${item.id}&gkzp=${0}`)">
				<view class="fw f1 f15 text-hidden-1">
					{{item.title}}
				</view>
				<view class="f12 co--999 mt20">
					{{item.updated_at}}
				</view>
			</view>
			<view class="p20 bag--fff mt20 br--20" v-if="orderState !=3" v-for="(item,index) in list" :key="index"
				@click="goto(`/pages/index/jobdetail?id=${item.id}`)">
				<view class="flex a-center">
					<view class="fw f1 f15 text-hidden-1">
						{{item.title}}
					</view>
					<view class="cred f15" v-if="orderState==0">
						{{item.salary_low==item.salary_high?item.salary_low:item.salary_low +'~'+item.salary_high }}
						<span class="f10 ml10 co--7676"
							v-if="orderState==1">元/{{item.salary_model=='day'?'日':'月'}}</span>
						<span class="f10 ml10 co--7676"
							v-else>元/{{item.salary_unit==1?'小时':item.salary_unit==2?'天':'次'}}</span>
					</view>
				</view>
				<view class="flex a-center mt20" v-if="orderState==1">
					<view class="cred f15 f1">
						{{item.salary_low}} ~ {{item.salary_high}}
						<span class=" ml10">元/月</span>
					</view>
					<view class="co--999 f12">
						1分钟前
					</view>
				</view>
				<view class="flex a-center ju--between mt30">
					<view class=" f12 flex a-center">
						<view class="bag co--7676">
							桃城区
						</view>
						<view class="bag co--7676 ml20">
							桃城
						</view>
					</view>
					<view class="co--999 f12" v-if="orderState==0">
						1分钟前
					</view>
				</view>
				<view class="flex a-center  mt30">
					<image src="../../static/shi.png" mode="" class="img20"></image>
					<view class="co--999 f12 mlr10">
						{{item.company_name}}
					</view>
					<image src="../../static/qi.png" mode="" class="img16"></image>
				</view>
			</view>
			<myEmpty v-if="list.length==0"></myEmpty>
			<view class="center fs12 co--999 mt10 bag--fff br--10 pb20 pt20" @click="dian" v-else>
				{{orderState==0?'查看更多零工信息':orderState==1?'查看更多企业招聘':orderState==2?'查看更多京津务工':'查看更多公开招聘'}}
			</view>
			<view class="jh"></view>
		</scroll-view>
		<supermarket></supermarket>
		<bottom :visible.sync="popupVisible"></bottom>
		<Tabbar :current-page="0" @open-modal="popupVisible = true" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupVisible: false, // 用于控制弹窗显示
				orderState: 0,
				tabList: [{
					label: '最新零工',
					status: 0
				}, {
					label: '企业招聘',
					status: 1
				}, {
					label: '京津务工',
					status: 2
				}, {
					label: '公开招聘',
					status: 3
				}],
				pageNo: 1,
				pageSize: 10,
				list: [],
				workid: 2,
				// list: []

			}
		},
		computed: {

		},
		onShow() {

		},
		onLoad() {
			// this.resetArr()
			this.getjoblist()
		},
		methods: {
			qzzs() {
				uni.navigateToMiniProgram({
					appId: 'wx5d961a99755ef34e',
					path: 'package-job-assistant/pages/index/index', //可选，要跳转的页面路径
					success(res) {
						console.log('跳转成功', res);
					},
					fail(err) {
						console.error('跳转失败', err);
					}
				});
			},
			resetArr() {
				this.pageNo = 1
				this.list = []
			},
			orderStateChange(id) { // 订单状态变化
				if (this.orderState !== id) {
					this.orderState = id
					this.resetArr()
					if (this.orderState == 3) {
						this.getlist()
					} else if (this.orderState == 0) {
						this.workid = 2
						this.getjoblist()
					} else if (this.orderState == 1) {
						this.workid = 1
						this.getjoblist()
					}
				}
			},
			async getlist() {
				let {
					data
				} = await this.$rqt.announcementLists({
					page_no: this.pageNo,
					page_size: this.pageSize
				})
				console.log(data.lists)
				this.list = data.lists
			},
			async getjoblist() {
				let {
					data
				} = await this.$rqt.joblists({
					page_no: 1,
					page_size: 10,
					work_type: this.workid
				})
				this.list = data.lists
				console.log(this.list, 'data.lists')
			},
			getMore() {
				// this.pageNo++
				console.log(this.pageNo)
			},
			dian() {
				if (this.orderState == 0) {
					this.goto('/pages/pagesA/message')
				} else if (this.orderState == 1) {
					this.goto('/pages/index/enterprise')
				} else if (this.orderState == 2) {
					this.goto('/pages/index/jjwork')
				} else if (this.orderState == 3) {
					this.goto('/pages/index/overt')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		height: 100vh;

		.img300 {
			width: 100%;
			height: 1200rpx;
			// flex: 1;
		}

		.box-top {
			margin-top: -150rpx;
			z-index: 9;

			.top {
				background: #fff;
				padding: 20px;
			}
		}

		.bag {
			background: #F1F1F1;
			padding: 4rpx;
			border-radius: 4rpx;
		}
	}

	.jh {
		height: 220rpx;
	}

	.w-max {
		// width: max-content;

		.active {
			color: var(--cg);
		}

		image {
			width: 20rpx;
			height: 8rpx;
			position: absolute;
			bottom: 0rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.vvl40+.vvl40 {
		margin-left: 40rpx;
	}

	.w3 {
		width: 3em;
	}
</style>